<template>
  <div class="app-container">
    <div class="filter-container"/>
    <div class="filter-container">

    </div>

    <el-card class="box-card">

      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="油站充值"
          name="first"
        >
          <div class="app-container">
            <div class="filter-container">

              <el-date-picker
                v-model="listQuery.startDay"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择开始日期时间"
                style="width: 200px;"
                class="filter-item"
                clearable
              />
              <el-date-picker
                v-model="listQuery.endDay"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择结束日期时间"
                style="width: 200px;"
                class="filter-item"
                clearable
              />
              <el-button
                v-waves
                class="filter-item"
                type="primary"
                icon="el-icon-search"
                @click="handleFilter"
              >
                搜索
              </el-button>

            </div>

            <el-table
              :key="key"
              :data="tableData1"
              border
              fit
              highlight-current-row
              style="width: 100%"
            >
              <el-table-column
                label="序号"
                prop="id"
                align="center"
                width="50"
              >
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>

              <el-table-column
                prop="company"
                label="油站名称"
                align="center"
                width=""
              />
              <el-table-column
                prop="phone"
                label="油站电话"
                align="center"
                width=""
              />
              <el-table-column
                label="油站类型"
                width=""
                align="center"
              >
                <template slot-scope="scope">
                  {{ scope.row.type | typeFilter }}
                </template>
              </el-table-column>
              <el-table-column
                prop="cashMoney"
                label="累计充值"
                align="center"
                width=""
              />
              <el-table-column
                label="操作"
                align="center"
                width=""
                class-name="small-padding fixed-width"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="mini"
                    style="width:80px"
                    @click="detail(scope.row)"
                  >详情
                  </el-button>

                </template>
              </el-table-column>


            </el-table>

            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="listQuery.page"
              :limit.sync="listQuery.limit"
              @pagination="getList"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane
          label="交易记录"
          name="second"
        >
          <pf-transfer2></pf-transfer2>

        </el-tab-pane>

      </el-tabs>
    </el-card>
  </div>
</template>
<script>
  import {
    cooperationList
  } from "@/api/v1";
  import pfTransfer2 from "@/components/pfTransfer2"; // Seco
  import waves from "@/directive/waves"; // Waves directive
  import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
  import {parseTime} from "@/utils";
  import {MessageBox, Message} from "element-ui";

  export default {
    directives: {waves},
    components: {Pagination, pfTransfer2},
    filters: {
      typeFilter(type) {
        if (type == 1) {
          return "加油站";
        } else if (type == 2) {
          return "修理站";
        } else if (type == 3) {
          return "加气站";
        } else if (type == 4) {
          return "总公司";
        } else {
          return "";
        }
      },
      typeFilter2(role) {
        switch (role) {
          case 1:
            return "上门自取";
          case 2:
            return "快递";
        }
      }
    },
    data() {
      return {
        activeName: "first",
        total: 0,
        tableData1: [],
        key: 1, // table key
        listLoading: false,
        listQuery: {
          page: 1,
          limit: 20,
          sort: "+id",
          agentId: null,
        }
      };
    },
    watch: {
      checkboxVal(valArr) {
        this.formThead = this.formTheadOptions.filter(
          i => valArr.indexOf(i) >= 0
        );
        this.key = this.key + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
      }
    },

    created() {
      this.getList();
    },
    methods: {
      detail(row) {
        console.log(row);
        this.$router.push({
          path: "/cooperationDetail2",
          query: {
            relationId: row.id,
            relationType: 1,
            currentMoney: row.currentMoney,
            phone: row.phone,
            name: row.name,
            uuid: row.uuid
          }
        });
      },
      getList() {
        this.listLoading = true;
        cooperationList(this.listQuery).then(res => {
          this.tableData1 = res.data.records;
          this.total = Number(res.data.total);
          this.listLoading = false;
        });
      },
      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      },
      handleClick(tab, event) {

      }
    }
  };
</script>
<style scoped>
  .master-card {
    cursor: pointer;
  }
</style>


